<template>
  <z-paging ref="paging" v-model="dataList" @query="queryList">
    <view w-full box-border pa-20rpx>
      <view v-for="item in dataList" bg-white rounded-20rpx box-border px-20rpx mb-20rpx>
        <view bg-white rounded-20rpx box-border px-20rpx mb-20rpx>
          <view text-28rpx py-40rpx flex items-center>
            <text text-28rpx font-bold mr-30rpx>{{ item.examName }}</text>
            <view
              v-if="item.examType == 1"
              w-100rpx
              h-40rpx
              flex
              justify-center
              items-center
              bg="#C0EFD9"
              rounded-20rpx
              text-24rpx>
              {{ examTypeDict[item.examType] }}
            </view>
            <view v-else w-100rpx h-40rpx flex justify-center items-center bg="#B7D6FF" rounded-20rpx text-24rpx>
              {{ examTypeDict[item.examType] }}
            </view>
          </view>
          <view text-24rpx text="#7D7D7D" mb-16rpx>{{ item.examStartTime }} 至 {{ item.examEndTime }}</view>
          <view text="#7D7D7D" text-24rpx mb-40rpx>
            用时:
            <text text="#000" mr-20rpx>{{ !item.examLimitMinute ? '无' : item.examLimitMinute + '分钟' }}</text>
            分数:
            <text text="#000" mr-20rpx>{{ item.examPassScore }} / {{ item.examTotalScore }}</text>
            排名:
            <text text="#000">{{ item.no ? item.no : '-' }}/{{ item.examUserNum }}</text>
          </view>
          <view flex justify-between items-center h-90rpx style="border-top: 1px solid #eee">
            <view flex items-center>
              <view text-24rpx font-500 mr-60rpx flex items-center>
                <image w-30rpx h-30rpx mr-10rpx :src="`/pages/exam/static/state_${item.state}.png`"></image>
                <text>{{ EXAM_STATE[item.state] }}</text>
              </view>
              <view text-24rpx font-500 flex items-center>
                <image w-30rpx h-30rpx mr-10rpx :src="`/pages/exam/static/state_${item.markState}.png`"></image>

                <text>{{ MARK_STATE[item.markState] }}</text>
              </view>
            </view>
            <view
              text-24rpx
              font-500
              w-180rpx
              h-60rpx
              rounded-40rpx
              bg="#FCC300"
              flex
              justify-center
              items-center
              @click="toRead(item)">
              {{ type === 9 || isExamEnd(item.examEndTime) ? '查看详情' : '开始考试' }}
            </view>
          </view>
        </view>
      </view>
    </view>
    <template #empty>
      <view w-full flex flex-col justify-center items-center>
        <image w-670rpx h-315rpx src="/pages/exam/static/empty.png"></image>
        <view text-28rpx text="#7D7D7D" mt-15rpx>暂无考试{{ type === 9 ? '记录' : '' }}</view>
      </view>
    </template>
    <!-- <template #bottom>
      <view w-full px-40rpx pb-46rpx pt-20rpx box-border>
        <view
          w-670rpx
          h-100rpx
          rounded-50rpx
          bg="#FCC300"
          flex
          justify-center
          items-center
          font-500
          text="#000"
          text-32rpx>
          开始考试
        </view>
      </view>
    </template> -->
  </z-paging>
</template>

<script setup lang="ts">
import { selectMyExamList } from '@/api/exam'
import { selectMyExamRecordList } from '@/api/examRecord'
import { onLoad, onShow } from '@dcloudio/uni-app'
const type = ref<number>(1)
const paging = ref<any>(null)
const dataList = ref<any>([])
const queryList = (pageNo: number, pageSize: number) => {
  const api: typeof selectMyExamList | typeof selectMyExamRecordList =
    type.value === 9 ? selectMyExamRecordList : selectMyExamList
  api({
    ...(type.value !== 9 ? { examType: type.value } : {}),
    pageNumber: pageNo,
    pageSize: pageSize
  } as Parameters<typeof api>[0])
    .then((res: any) => {
      paging.value.complete(res.data.result.records)
    })
    .catch(() => {
      paging.value.complete(false)
    })
}

const EXAM_STATE = ref<any>({
  1: '未考试',
  2: '考试中',
  3: '已交卷'
})

const MARK_STATE = ref<any>({
  1: '未阅卷',
  2: '阅卷中',
  3: '已阅卷'
})
const examTypeDict = ref<any>({
  1: '模拟',
  2: '综合',
  3: '专题'
})

// 判断考试是否结束
function isExamEnd(endTime: string) {
  const now = new Date().getTime()
  const examEndTime = new Date(endTime).getTime()
  return now > examEndTime
}

function toRead(item: any) {
  uni.navigateTo({
    url: `/pages/exam/examRead?examId=${item.examId}&type=${type.value}`
  })
}

onMounted(() => {})
onLoad((options: any) => {
  type.value = parseInt(options.type)

  uni.setNavigationBarTitle({
    title: type.value === 9 ? '考试记录' : type.value === 1 ? '模拟考试' : '综合考试'
  })
})
onShow(() => {
  if (paging.value) {
    paging.value.reload()
  }
})
</script>
<style>
page {
}
</style>
<style scoped lang="scss"></style>
